---
type: tutorial
title: Crie um rodapé de redes sociais
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Construa um novo componente do zero, e então o adicione as suas páginas
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';



<PreCheck>
  - Criar um componente de Rodapé
  - Criar e passar props para um componente de Rede Social
</PreCheck>

Agora que você utilizou componentes Astro em uma página, é hora de utilizar um componente dentro de outro componente!

## Crie um componente de Rodapé

1. Crie um novo arquivo em `src/components/Footer.astro`.

2. Copie o seguinte código em seu novo arquivo, `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Aprenda mais sobre meus projetos em <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```

### Importe e utilize `Footer.astro`

1. Adicione a seguinte declaração de importação ao frontmatter em cada uma de suas três páginas Astro (`index.astro`, `about.astro` e `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Adicione um novo componente `<Footer />` no seu template Astro em cada página, logo antes da tag de fechamento `</body>` para mostrar seu rodapé no fim da sua página. 

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. Na pré-visualização do seu navegador, verifique que você pode ver seu novo texto de rodapé em cada página.

<Box icon="puzzle-piece">

## Tente você mesmo - Personalize seu rodapé

Customize seu rodapé para mostrar múltiplas redes sociais (e.x. Instagram, Twitter, LinkedIn) e inclua seu nome de usuário para fazer um link diretamente ao seu perfil.

</Box>

### Check In de Código

Se você estiver seguindo durante cada etapa do tutorial, seu arquivo `index.astro` deve se parecer assim:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Página Inicial';
---

<html lang="pt-BR">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Crie um componente de Rede Social

Já que você pode ter múltiplas contas online no qual você queira adicionar links para, você pode fazer um único componente reutilizável e mostrá-lo múltiplas vezes. Cada vez, você irá passá-lo diferentes propriedades (`props`) para utilizar: a plataforma online e seu nome de usuário nela.

1. Crie um novo arquivo em `src/components/Social.astro`.

2. Copie o seguinte código em seu novo arquivo, `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```

### Importe e utilize `Social.astro` em seu Rodapé

1. Modifique o código em `src/components/Footer.astro` para importar, e então utilizar este novo componente três vezes, passando diferentes **atributos do componente** como props a cada vez:

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Aprenda mais sobre meus projetos em <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Verifique a pré-visualização do seu navegador, e você deve ver seu novo rodapé mostrando links para essas três plataformas em cada página.

## Estilize seu Componente de Rede Social

1. Customize a aparência dos seus links adicionando uma tag `<style>` em `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="platform-social'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Adicione uma tag `<style>` em `src/components/Footer.astro` para melhorar a disposição de seus conteúdos.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Verifique a pré-visualização do seu navegador novamente e confirme que cada página mostra um rodapé atualizado.

<Box icon="question-mark">

### Teste você mesmo

1. Que linha de código você precisa escrever no frontmatter de um componente Astro para receber valores de `titulo`, `autor` e `data` como props?

    <MultipleChoice>
      <Option isCorrect>
        `const { titulo, autor, data } = Astro.props;`
      </Option>
      <Option>
        `import PostBlog from '../components/PostBlog.astro'`
      </Option>
      <Option>
        `<PostBlog title="Minha Primeira Postagem" autor="Dan" data="12 Ago 2022" />`
      </Option>
    </MultipleChoice>
    

2. Como você **passa valores como props** para um componente Astro?
    <MultipleChoice>
      <Option>
        `const { titulo, autor, data } = Astro.props;`
      </Option>
      <Option>
        `import PostBlog from '../components/PostBlog.astro'`
      </Option>
      <Option isCorrect>
        `<PostBlog titulo="Minha Primeira Postagem" autor="Dan" data="12 Ago 2022" />`
      </Option>
    </MultipleChoice>
</Box>



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso criar novos componentes `.astro` em `src/components/`
- [ ] Eu posso importar e utilizar componentes Astro dentro de outros componentes Astro.
- [ ] Eu posso passar props para um componente Astro.
</Checklist>
</Box>

### Recursos

- [Props do Componente no Astro](/pt-br/basics/astro-components/#props-do-componente)
